<template>
  <el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">评分项目重填</span>
    </template>
  </el-page-header>
  <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(51, 126, 204, 0.5);
    "
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ empName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
    <div class="opinion">
      <div style="width:100%;color: #9d9d9d;margin-bottom:8px;"><el-icon><ChatLineSquare/></el-icon>Tip</div>
      <span style="color:#F56C6C">
      审核意见：</span>{{ Opinion }}
    </div>
  </el-descriptions>
  <el-table
    :data="tableData"
    border
    style="
      width: 80%;
      margin: 20px auto;
      border-radius: 8px;
      box-shadow: 5px 5px 10px rgba(51, 126, 204, 0.5);
    "
    :header-cell-style="{
      background: '#337ecc !important',
      color: '#ffffff',
      border: 'none !important',
    }"
  >
    <el-table-column prop="target" label="考核条目" />
    <el-table-column prop="amount1" label="评分">
      <template v-slot="scope">
        <el-input
          style="width: 200px"
          :ref="'inputFocus' + scope.$index"
          v-model="Form[scope.$index].score"
          placeholder="请填写评分（0~100）"
          class="input"
        />&nbsp;&nbsp;分
      </template>
    </el-table-column>
  </el-table>
  <el-button
    type="primary"
    @click="submitForm"
    class="button"
    >重填提交</el-button
  >
</template>

<script setup>
import { ref, onBeforeMount, reactive, getCurrentInstance } from "vue";
import { getPositionScoreAssessorList } from "@/api/score";
import { useRoute } from "vue-router";
import { reBackAdd } from "@/api/empScore";
import { ElMessage } from "element-plus";
import { getOpinion } from "@/api/backWait";
const route = useRoute();

let empId = route.query.empId;
let deptName = route.query.deptName;
let empName = route.query.empName;
let positionId = route.query.positionId;
let position = route.query.position;
let type = route.query.type;

const Form = reactive([]);
const tableData = ref([]);
const Opinion = ref([]);
onBeforeMount(() => {
  let positionId = route.query.positionId;
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  getPositionScoreAssessorList({ positionId, assessorId }).then((data) => {
    tableData.value = data.data;
    for (let i = 0; i < tableData.value.length; i++) {
      Form.push({
        empId: route.query.empId,
        scoreAssessorsId: tableData.value[i].scoreAssessorsId,
        score: "",
      });
    }
  });
  let type="score"
  getOpinion({ empId, positionId,type }).then((data) => {
    Opinion.value = data.data.opinion;
  });
});

const { proxy } = getCurrentInstance();
const goback = () => {
  proxy.$router.go(-1);
};

const submitForm = () => {
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  let empId = route.query.empId;
  let positionId = route.query.positionId;
  let positionType = route.query.type;
  reBackAdd({ Form, empId, assessorId, positionId, positionType }).then(
    (data) => {
      if (data.code == 200) {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        goback();
      }
    }
  );
};
</script>
<style lang="scss" scoped>
:deep(.my-label) {
  background: rgba(51, 126, 204, 0.2) !important;
  color: rgb(51, 126, 204) !important;
  border: #337ecc 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(51, 126, 204, 0.9) !important;
  border: #337ecc 2px solid !important ;
}
.button {
  width: 120px;
  height: 40px;
  margin: 10px 130px;
  float: right;
}
.opinion {
  width: 25%;
  height: 100%;
  border-radius: 8px;
  color: #363636;
  display: inline-block;
  border: #363636 2px dashed;
  background: #fff;
  margin: 10px auto;
  padding: 10px;
}
</style>
